<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <el-form size="mini" :inline="true" :model="searchModel">
                <el-form-item label="通知状态:">
                  <el-radio-group
                    @change="search(1)"
                    v-model="searchModel.status"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="0">初始状态</el-radio-button>
                    <el-radio-button label="1">待处理</el-radio-button>
                    <el-radio-button label="2">完成处理</el-radio-button>
                    <el-radio-button label="-1">死信</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="外部批次号:">
                  <el-input
                    size="mini"
                    v-model="searchModel.importBatchNo"
                    placeholder="外部批次号"
                  ></el-input>
                </el-form-item>

                <el-form-item label="商户编号:">
                  <el-input
                    size="mini"
                    v-model="searchModel.userId"
                    placeholder="商户编号"
                  ></el-input>
                </el-form-item>

                <el-form-item label="批次编号:">
                  <el-input
                    size="mini"
                    v-model="searchModel.payTransBatchId"
                    placeholder="批次编号"
                  ></el-input>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="primary" @click="search(1)">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <el-card shadow="never">
          <el-table
            size="mini"
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            highlight-current-row
          >
            <el-table-column label="商户编号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.userId }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="外部批次号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.importBatchNo }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="批次编号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.payTransBatchId }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="通知次数">
              <template slot-scope="scope">
                <div>{{ scope.row.notifyCount }}次</div>
              </template>
            </el-table-column>

            <el-table-column  label="通知状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == '0'" class="text-info"
                  >初始状态</span
                >
                <span v-if="scope.row.status == '1'" class="text-primary"
                  >待处理</span
                >
                <span v-if="scope.row.status == '2'" class="text-success"
                  >完成处理</span
                >
                <span v-if="scope.row.status == '-1'" class="text-danger"
                  >死信</span
                >
              </template>
            </el-table-column>
              <el-table-column label="失败信息">
              <template>
                <div>-</div>
              </template>
            </el-table-column>

            <el-table-column label="下次通知时间">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.nextNotifyTime }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="完成时间">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.endTime }}
                </div>
              </template>
            </el-table-column>

            <el-table-column width="150" label="创建时间">
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>

              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <div>
                    <el-button
                      v-if="scope.row.status == '1' || scope.row.status == '-1'"
                      v-permission="['ADMIN','charge-notify-record::initiate']"
                      size="mini"   
                      type="text"
                      @click="doInitiateChargeNotify(scope.row.id)"
                    >
                      重试回调
                    </el-button>
                  </div>
                </template>
              </el-table-column>

          </el-table>
          <el-row class="paging-wrap">
            <el-col :span="24">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchModel.pageSize"
                layout="prev, pager, next, sizes, jumper"
                @size-change="PageSizeChange"
                @current-change="PageChange"
                :total="searchModel.count"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script>
import { searchChargeNotifyRecord,initiateChargeNotify } from "@/api/business";
import pickerOptions from "../../utils/options";
import moment from "moment";

let defaultSearchModel = {
  pageSize: 10,
  pageNo: 1,
  count: null,
  importBatchNo: null,
  userId: null,
  payTransBatchId: null,

  status: "", //状态
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultSearchModel),
      loading: false,
      opLoading: false,
      tableData: [],
      pickerOptions,
    };
  },

  components: {},
  methods: {
    search(pageNo) {
      this.loading = true;
      if (pageNo) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);
      searchChargeNotifyRecord(searchModel)
        .then((res) => {
          if (res.success) {
            this.loading = false;
            this.searchModel.count = res.count;
            this.tableData = res.data;
          } else {
            this.searchModel.count = 0;
            this.tableData = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.searchModel.count = 0;
          this.tableData = [];
        });
    },
    //重试回调
    doInitiateChargeNotify(id){
      let form = {
        id
      }
    initiateChargeNotify(form).then((resp=>{
      if(resp.success){
         this.$notify({
              title: "重试成功",
              message: `重试成功`,
              type: "success",
            });
            this.search();
      }
    })).catch((err) => {
          console.log(err);
        });
    },
    
    compileSearchModel(searchModel) {
      if (searchModel.createTime) {
        searchModel.minCreateTime = searchModel.createTime[0];
        searchModel.maxCreateTime = searchModel.createTime[1];
      }

      searchModel.pageNo = searchModel.pageNo - 1;

      delete searchModel.createTime;
    },

    /**
     * 页数改变
     * @param data 改变后的页数
     * @constructor
     */
    PageChange(data) {
      this.searchModel.pageNo = data;
      this.search();
    },
    /**
     * 单页条数改变
     * @param data 改变后的条数
     * @constructor
     */
    PageSizeChange(data) {
      this.searchModel.pageSize = data;
      this.search();
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultSearchModel);
      this.search();
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style lang="scss" scoped>
.substationGroup {
  margin-bottom: 16px;
  .substationItem {
    margin-right: 20px;
  }
}
</style>
